<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        :tree-props="{ children: 'children', hasChildren: 'xxa' }"
        row-key="id"
        :checkStrictly="true"
        uniqueId="mesRequisitionBillTable"
      >
      </ele-page>
    </div>

    <!-- 新增、修改、详情侧抽 -->
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
    </ele-form-drawer>

    <!-- 导入侧抽 -->
    <ele-form-drawer
      size="30%"
      :isLoading="isLoadingImport"
      v-model="importData"
      v-bind="importFormDescDialog"
      :request-fn="handleSubmitImport"
      :visible.sync="importVisible"
      :destroyOnClose="true"
      :title="$i18n.t('common.import')"
    >
      <template v-slot:file="{ desc, data, field, formData }">
        <!-- 插槽内容有el-form-item组件包裹 -->
        <uploadNoAuto @onchange="upLoadHandleChange" ref="uploadNoAuto" />
      </template>
    </ele-form-drawer>
  </div>
</template>

<script>
import {
  operateList,
  searchConfig,
  importFormDescDialog,
  formDescDialog,
  rowConfig,
} from "./config";
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  rowDetail,
  importData,
  getCreateTypeList,
  getListByPlanCode,
} from "@/api/materialRequisition/mesRequisitionBill";
import uploadNoAuto from "@/components/upload-no-auto";
import EleTableEditor from "ele-table-editor";
export default {
  name: "mesRequisitionBill",
  components: {
    uploadNoAuto,
    EleTableEditor,
  },
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      rowKey: "planCode",
      formDataDialog: {},
      formDescDialog, //新增修改框
      searchConfig,
      operateList,
      getList,
      isLoadingImport: false, // 导入数据loading
      importData: {}, //导入数据
      importVisible: false,
      importFormDescDialog, // 导入字段配置
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left",
          // selectable: (data) => {
          //   if (!!data.planCode) {
          //     return true;
          //   }
          // },
        },
        {
          type: "index",
          label: $i18n.t("common.order"), // 序号
          fixed: "left",
        },
        {
          prop: "planCode",
          label: this.$t("mesRequisitionBill.planCode"),
          showOverflowTooltip: true,
          minWidth: 180,
          fixed: "left",
          headerAlign: "center",
        },
        {
          prop: "prodCode",
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.prodCode"), // 产品编码
        },
        {
          prop: "prodName",
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.prodName"), // 产品名称
        },
        {
          prop: "bomVersion",
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.bomVersion"), // BOM版本号
        },
        {
          prop: "materialCode",
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.materialCode"), // 物料编码
        },
        {
          prop: "materialName",
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.materialName"), // 物料名称
        },
        {
          prop: "unit",
          width: 120,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.unit"), // 计量单位名称
        },
        {
          prop: "needQty",
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.needQty"), // 需求数量(标准用量)
        },
        {
          prop: "receiveQty",
          width: 120,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.receiveQty"), // 已领数量
        },
        {
          prop: "unReceiveQty",
          width: 120,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.unReceiveQty"), // 未领数量（需求数量-已领数量+已退数量）
        },
        {
          prop: "pickQty",
          width: 120,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.pickQty"), // 领料中数量
        },
        {
          prop: "advancingStockDays",
          width: 160,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.advancingStockDays"), // 提前备货期限（T-）天
        },
        {
          prop: "createType",
          width: 120,
          showOverflowTooltip: true,
          label: $i18n.t("mesRequisitionBill.createType"), // 创建类型（0-排程创建，1、人工创建）
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getCreateTypeList();
            return list.data.result;
          },
        },
        {
          prop: "createByName",
          width: 120,
          showOverflowTooltip: true,
          label: $i18n.t("common.createByName"), // 创建人名称
        },
        {
          prop: "createTime",
          label: $i18n.t("common.createTime"), // 创建时间
          width: 180,
        },
        {
          prop: "updateByName",
          width: 120,
          showOverflowTooltip: true,
          label: $i18n.t("common.updateByName"), // 更新人名称
        },
        {
          prop: "updateTime",
          label: $i18n.t("common.updateTime"), // 更新时间
          width: 180,
        },
        // {
        //   prop: 'operate',
        //   label: $i18n.t('common.operation'), // 操作
        //   width: 160,
        //   fixed: 'right',
        //   render: (h, scope) => {
        //     return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
        //   }
        // }
      ],
    };
  },
  computed: {},
  methods: {
    handLoad(tree, treeNode, resolve) {
      getListByPlanCode({ planCode: tree.planCode }).then((res) => {
        const children = res.data.result;
        resolve(children);
      });
    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name;
      const fnc = {
        add: () => {
          this.disableFields(false);
          this.formDataDialog = {};
          this.visible = true;
        },
        requireMaterial: () => {
          let ids = [];

          data.rows.map((val) => {
            if (!val.children) {
              ids.push(val.id);
            }
          });

          this.$router.push({
            path: "/order/pickingList",
            query: {
              ids: ids.join(","),
            },
          });
        },
        deleteBatch: () => {
          this.$confirm(
            $i18n.t("common.deleteConfirm"),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.submit"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            const ids = data.rows.map((val) => val.id).join(",");
            this.rowDel(ids);
          });
        },
        import: () => {
          this.importDialogData = {};
          this.importVisible = true;
        },
      };
      fnc[data.handleName]();
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        edit: () => {
          this.disableFields(false);
          this.rowDetail(row.id);
          this.visible = true;
        },
        detail: () => {
          this.disableFields(true);
          this.rowDetail(row.id);
          this.visible = true;
        },
        delete: () => {
          this.$confirm(
            $i18n.t("common.deleteConfirm"),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.ok"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            this.rowDel(row.id);
          });
        },
      };
      fnc[handleName]();
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true;
      api(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || title);
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return; // 判断状态
      delete data.userDefined1; // 删除不需要修改的非主键字段
      delete data.userDefined2; // 删除不需要修改的非主键字段
      delete data.userDefined3; // 删除不需要修改的非主键字段
      delete data.userDefined4; // 删除不需要修改的非主键字段
      delete data.userDefined5; // 删除不需要修改的非主键字段
      delete data.createBy; // 删除不需要修改的非主键字段
      delete data.createByName; // 删除不需要修改的非主键字段
      delete data.createTime; // 删除不需要修改的非主键字段
      delete data.updateBy; // 删除不需要修改的非主键字段
      delete data.updateByName; // 删除不需要修改的非主键字段
      delete data.updateTime; // 删除不需要修改的非主键字段
      delete data.activeFlag; // 删除不需要修改的非主键字段
      const params = this.formDataDialog.id
        ? { title: $i18n.t("common.deleteSuccess"), api: rowUpdate, data }
        : { title: $i18n.t("common.addSuccess"), api: rowCreate, data };
      this.doSubmit(params);
    },
    //删除
    rowDel(data) {
      this.loading = true;
      rowDel(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.deleteSuccess"));
          this.refresh();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag;
      this.formDescDialog.isShowSubmitBtn = !flag;
    },
    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result;
      });
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
    //数据文件上传
    upLoadHandleChange(file) {
      this.$set(this.importData, "file", file);
    },
    // 提交导入信息
    handleSubmitImport() {
      if (!this.importData.file) {
        this.$message.error($i18n.t("common.uploadMsg"));
        return;
      }
      const formData = new FormData();
      formData.append("file", this.importData.file.get("file"));
      this.isLoadingImport = true;
      importData(formData)
        .then((res) => {
          this.$message.success($i18n.t("common.importSuccess"));
          this.isLoadingImport = false;
          this.importVisible = false;
          this.refresh();
        })
        .catch((error) => {
          console.log("错误", error);
          this.$set(this.importData, "file", null);
        })
        .finally(() => {
          this.isLoadingImport = false;
          this.$refs.uploadNoAuto.clearFiles();
        });
    },
  },
};
</script>
